<template>
          <div class="sou_div">  <!-- 大盒子  -->
              <div class="sou_div2">  <!-- 内容盒子  -->
                         
                              <div class="sou_top">     <!-- 热搜头部 -->
                                        <div class="div_show" v-show="flag_div">  <!-- 显示隐藏 -->
                                          <ul>
                                          <li>热搜标题：
                      <el-input v-model="input1"  class="w-50 m-2" placeholder="请输入 热搜标题" style="width: 150px; margin-right: 20px;" />
                                          </li>

                                          <li>热搜内容：
                      <el-input v-model="input2"  class="w-50 m-2" placeholder="请输入 热搜内容" style="width: 150px; margin-right: 20px;" />
                                          </li>

                                          <li>
                                            <!-- 启动状态：<input type="text" placeholder="请选择启用状态"> -->

                                             启用状态：
                                             <el-select v-model="value" clearable placeholder="请选择 &emsp; 启用状态">
                                                      <el-option
                                                        v-for="item in options"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                      />
                                                    </el-select>
                                          </li>
                                        </ul>

                                          <button class="sou_btn1">搜索</button>
                                          <button class="sou_btn2">清空</button>
                                        </div>

                                          <div class="zeng">
                                            <button class="sou_btn3">新增</button>
                                            <button class="sou_btn4">批量删除</button>
                                          </div>

                                                <!-- 清空选中状态 -->
                                          <div class="checkall">
                                              <p>当前表格已选择<span>{{check}}</span>项 &emsp; <span @click="sou_qing">清空</span></p>

                                                <div class="cgeckall_gong">
                                                  <i>
                                                          <svg t="1676372391042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2193" width="15" height="15"><path d="M822.496 473.152a32 32 0 0 0-31.392 55.776l97.450667 54.848c20.32 11.434667 45.653333-2.005333 47.594666-25.248 1.674667-20.16 2.517333-35.573333 2.517334-46.528C938.666667 276.362667 747.637333 85.333333 512 85.333333S85.333333 276.362667 85.333333 512s191.029333 426.666667 426.666667 426.666667c144.106667 0 276.053333-72.032 354.752-189.536a32 32 0 1 0-53.173333-35.616C746.645333 813.461333 634.538667 874.666667 512 874.666667c-200.298667 0-362.666667-162.368-362.666667-362.666667s162.368-362.666667 362.666667-362.666667c197.098667 0 357.472 157.226667 362.538667 353.109334l-52.042667-29.290667z" fill="#000000" p-id="2194"></path></svg>
                                                  </i>
                                                  &emsp;
                                                  <i @click="xian_flag">
                                                          <svg t="1676372587927" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" width="15" height="15"><path d="M955.069071 864.311021 740.015134 649.258107c-3.752464-3.751441-8.841366-5.860475-14.149255-5.860475-5.306866 0-10.395768 2.108011-14.149255 5.860475l-16.692171 16.692171-38.34226-38.34226c53.03796-59.810201 85.298711-138.442072 85.298711-224.478588 0-186.774871-151.952784-338.727655-338.727655-338.727655S64.527642 216.35456 64.527642 403.12943c0 186.775894 151.952784 338.728678 338.727655 338.728678 86.36909 0 165.276231-32.510438 225.170343-85.913718l38.303374 38.303374-17.34504 17.34504c-7.812943 7.813966-7.812943 20.48352 0 28.297486l215.051891 215.052914c3.753487 3.751441 8.841366 5.860475 14.149255 5.860475 5.306866 0 10.395768-2.108011 14.149255-5.860475l62.334697-62.334697C962.883037 884.794541 962.883037 872.124987 955.069071 864.311021zM104.546078 403.12943c0-164.709319 133.9999-298.709219 298.709219-298.709219s298.709219 133.9999 298.709219 298.709219S567.964616 701.839673 403.255297 701.839673 104.546078 567.838749 104.546078 403.12943zM878.585119 912.496463 691.829691 725.741036l34.036187-34.036187 186.755428 186.755428L878.585119 912.496463z" fill="#272636" p-id="3146"></path></svg>
                                                  </i>
                                                </div>

                                          </div>

                                             

                              </div>   <!-- 热搜头部 -->


            

                          


                                                  
    <!-- 表格 -->
 <el-table :data="list" @selection-change="handleSelectionChange"  style="width: 100%" max-height="250">


      
      <el-table-column type="selection" width="55" />        

    <el-table-column fixed prop="title" label="热搜标题" width="90" align="center">
      <template #default="scope">
      <span>{{ scope.row.title == 111?'标题':"标题1"}}</span>
    </template>
    </el-table-column>
    <el-table-column prop="seq" label="热搜内容" width="120"  align="center"/>
    <el-table-column prop="recDate" label="录入时间" width="200" align="center"/>
    <el-table-column prop="content" label="顺序" width="120" align="center"/>
    <el-table-column prop="status" label="启用状态" width="300" align="center"/>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          Remove
        </el-button>
      </template>
    </el-table-column>
  </el-table>


          </div>  <!-- 大盒子  -->
          </div>  <!-- 内容盒子  -->

</template>

<script lang="ts"  setup>


import { onMounted, ref} from 'vue'   //公共
import { resou } from "../../api/index"    //获取数据接口
import { Search } from '@element-plus/icons-vue'
 
//获取热搜数据
const list= ref ([])
onMounted(async ()=>{
const res=await resou()
list.value=res.data.records
console.log(res.data.records);

console.log(list);
})







// 表格
const now = new Date()

const check = ref(0)

// 全选
const handleSelectionChange=(val)=> {
      // console.log(val.Proxy);
      check.value = val.length
    
    }

    



const deleteRow = (index: number) => {
  list.value.splice(index, 1)
}


// 显示隐藏
const flag_div = ref(true)
const xian_flag = ()=>{
  flag_div.value = !flag_div.value 
}


//点击清空
const sou_qing = ()=>{

console.log('清空');

}

//下拉框
const value = ref('')
const options = [
  {
    value: 'Option2',
    label: '启用',
  },
  {
    value: 'Option3',
    label: '未启用',
  },
 
]
const input1 = ref('')
const input2 = ref('')


</script>



<style scoped>
span{
  cursor: pointer;
}
  .sou_div{
    width: 100%;
    height: 650px;
    background: rgb(241, 241, 241);
    padding-top: 20px;
  }

  .sou_div2{
        width: 95%;
    height: 95%;
    background: #fff;
    margin-left: 20px;
    padding-left: 20px;
  }

  .sou_top{
    width: 100%;
    /* height: 140px; */
    clear: both;
  }
  .checkall{
    margin-top: 10px;

  }
  .checkall p{
    font-size: 14px;
    width: 200px;
    background: rgb(196, 224, 255);
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border: solid 1px rgb(61, 200, 255);
    color: rgb(95, 106, 255);
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 30px;
  }
  .cgeckall_gong{
    float: right;
    margin-right: 150px;
  }
  .cgeckall_gong i{
    display: inline-block;
    width: 25px;
    height: 25px;
    border: solid 1px #ccc;
    border-radius: 20px;
    text-align: center;
    line-height: 25px;
  }

  .sou_top ul{
        width: 75%;
        height: 50px;
        display: flex;
        /* background: #000; */
        align-items: center;
        float: left;
        font-size: 14px;
  }

 

  .sou_top ul li input::placeholder{
    color: #ccc;
  }

  /* 按钮 */
  .sou_btn1{
          width: 80px;
          height: 30px;
          margin-right: 30px;
          margin-top: 10px;
          font-size: 13px;
          border-radius: 10px;
          border: none;
          background: rgb(26, 152, 255);
          color: #fff;

  }

  .sou_btn2{
          width: 80px;
          height: 30px;
          font-size: 13px;
          background: #fff;
          border: solid 1px #ccc;
          border-radius: 10px;
  }      /* 按钮 *


        /* 下拉 */
  .sou_se{
    width: 150px;
    height: 25px;
    border: solid 1px #ccc;
    border-radius: 10px;
    padding-left: 20px;
  }

  .opti{
    width: 300px;
  }



  /* 增加 */
  .zeng{
    width: 100%;
    clear: both;
    margin-top: 20px;
    display: inline-block;
  }

  .sou_btn3{
    width: 80px;
    margin-right: 10px;
    height: 30px;
    background: rgb(26, 152, 255);
    border: none;
    color: #fff;
    border-radius: 10px;
  }

  .sou_btn4{
    width: 80px;
    margin-right: 30px;
    height: 30px;
    color: #fff;
    border: none;
    border-radius: 10px;
    background: pink;
  }




</style>






